<template>
  <div class="operaBtn">
    <!-- 点赞 -->
    <div
      class="likes"
      :class="{ 'is-like': isLike, 'is-immerse': isImmerse }"
      @click="likes"
    >
      <el-badge :value="likeCount" class="item" type="primary">
        <svg-icon icon-file-name="like-fill"></svg-icon
      ></el-badge>
    </div>
    <!-- 评论 -->
    <div
      class="comments"
      @click="openDrawer"
      :class="{ 'is-immerse': isImmerse }"
    >
      <el-badge :value="commentCount" class="item" type="primary">
        <svg-icon icon-file-name="message-fill"></svg-icon
      ></el-badge>
    </div>
    <!-- 收藏 -->
    <div
      class="collect"
      :class="{ 'is-collect': isCollect, 'is-immerse': isImmerse }"
      @click="opCollectDialog"
    >
      <el-badge :value="collectCount" class="item" type="primary">
        <svg-icon icon-file-name="star-fill"></svg-icon
      ></el-badge>
    </div>
    <!-- 选择收藏夹对话框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      top="20vh"
      :append-to-body="true"
      width="30%"
      :before-close="closeCollect"
    >
      <div class="dialog-top">
        <span>{{ !isCreateCollect ? "添加收藏" : "创建收藏夹" }}</span>
        <svg-icon icon-file-name="close" @click="closeCollect()"></svg-icon>
      </div>
      <div class="active-collect" v-if="!isCreateCollect">
        <div class="dialog-bottom">
          <button
            class="wl-btn"
            style="width: 100%; height: 40px; margin-bottom: 10px"
            @click="isCreateCollect = true"
          >
            <i class="el-icon-circle-plus"></i> 创建收藏夹
          </button>
          <div class="collect-list">
            <div
              class="item"
              v-for="(item, index) in collectCategory"
              :key="index"
            >
              <div class="item-left">
                <span style="font-size: 16px">{{ item.categoryName }}</span>
                <span style="font-size: 12px"
                  >{{ item.count }} 条内容 |
                  {{ item.isPrivate ? "私密" : "公开" }}</span
                >
              </div>
              <button
                @click="collect(item.isCollect, item.categoryId)"
                :class="{ disabled: item.isCollect }"
                style="width: 90px; height: 35px"
                class="wl-btn"
              >
                {{ item.isCollect ? "已收藏" : "收藏" }}
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="add-collect" v-else>
        <el-input
          type="text"
          placeholder="输入收藏夹标题"
          v-model="categoryForm.categoryName"
          maxlength="10"
          show-word-limit
        >
        </el-input>
        <div class="isPrivate" style="padding: 10px">
          <span style="float: left">私密</span>
          <el-switch style="float: right" v-model="categoryForm.isPrivate">
          </el-switch>
        </div>
        <div style="position: absolute; bottom: 20px; right: 20px">
          <el-button @click="isCreateCollect = false">返回</el-button>
          <el-button type="primary" @click="createCategory">确认创建</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 沉浸模式 -->
    <el-tooltip
      class="item"
      effect="dark"
      :content="isImmerse ? '退出沉浸模式' : '沉浸模式'"
      placement="top-start"
    >
      <div class="immerse" @click="changeImmerse">
        <svg-icon
          :icon-file-name="isImmerse ? 'eyeclose-fill' : 'eye-fill'"
        ></svg-icon></div
    ></el-tooltip>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { getUserId } from "../../../utils/auth";
import {
  judgeLikes,
  activeLikes,
  cancelLikes,
  getLikeCount,
  judgeCollect,
  getCollectCount,
  createCategory,
  activeCollect,
  cancelCollect,
} from "../../../api/post";
import { getCollectData } from "../../../api/personal";
export default {
  props: {
    postId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      // 是否点赞
      isLike: false,
      likeCount: null,
      // 是否收藏
      isCollect: false,
      collectCount: null,
      // 选择收藏夹对话框
      dialogVisible: false,
      // 是否打开创建收藏夹
      isCreateCollect: false,
      // 收藏夹列表
      collectCategory: [],
      // 创建收藏夹的数据
      categoryForm: {
        userId: getUserId(),
        categoryName: "",
        isPrivate: false,
      },
    };
  },
  methods: {
    // 切换沉浸模式
    ...mapMutations({
      changeImmerse: "Immerse/changeImmerse",
    }),
    // 打开左侧的评论抽屉
    openDrawer() {
      this.$emit("openDrawer");
    },
    // 判断是否点赞
    judgeLikes() {
      judgeLikes(getUserId(), this.postId).then((res) => {
        if (res.data.code === 1) {
          this.isLike = res.data.data.isLike;
        } else {
          this.$message.error("网络错误");
        }
      });
    },
    // 点赞操作相关
    likes() {
      if (this.isLike) {
        // 已经点赞则发送取消点赞请求
        cancelLikes(getUserId(), this.postId).then((res) => {
          if (res.data.code === 1) {
            this.isLike = false;
            this.likeCount--;
          } else {
            this.$message.error("网络错误");
          }
        });
      } else {
        // 未点赞则发送点赞请求
        activeLikes(getUserId(), this.postId).then((res) => {
          if (res.data.code === 1) {
            this.isLike = true;
            this.likeCount++;
          } else {
            this.$message.error("网络错误");
          }
        });
      }
    },
    // 获取点赞数量
    getLikeCount() {
      getLikeCount(this.postId).then((res) => {
        if (res.data.code === 1) {
          this.likeCount = res.data.data;
        } else {
          this.$message.error("网络错误");
        }
      });
    },
    // 判断是否收藏
    judgeCollect() {
      judgeCollect(getUserId(), this.postId).then((res) => {
        if (res.data.code === 1) {
          this.isCollect = res.data.data.isCollect;
        } else {
          this.$message.error("网络错误");
        }
      });
    },
    // 收藏操作相关
    opCollectDialog() {
      this.dialogVisible = true;
      this.getCollectData();
    },
    collect(isCollect, categoryId) {
      if (isCollect) {
        // 取消收藏
        cancelCollect(getUserId(), this.postId, categoryId).then((res) => {
          if (res.data.code === 1) {
            this.closeCollect();
            this.collectCount--;
            this.judgeCollect();
          } else {
            this.$message.error("网络错误");
          }
        });
      } else {
        // 收藏
        activeCollect(getUserId(), this.postId, categoryId).then((res) => {
          if (res.data.code === 1) {
            this.closeCollect();
            this.collectCount++;
            this.isCollect = true;
          } else {
            this.$message.error("网络错误");
          }
        });
      }
    },
    // 获取所有收藏夹数据
    getCollectData() {
      getCollectData(getUserId()).then((res) => {
        if (res.data.code === 1) {
          // 处理数据，判断是否每个收藏夹是否收藏该文章
          const collectData = res.data.data;
          collectData.forEach((item) => {
            let flag = false;
            if (item.contentData.length > 0) {
              for (let i = 0; i < item.contentData.length; i++) {
                if (item.contentData[i].postId === this.postId) {
                  flag = true;
                  break;
                }
              }
            }
            item.isCollect = flag;
          });
          this.collectCategory = collectData;
        } else {
          this.$message.error("网络错误");
        }
      });
    },
    // 创建收藏夹
    createCategory() {
      createCategory(this.categoryForm).then((res) => {
        if (res.data.code === 1) {
          this.closeCollect();
          this.dialogVisible = true;
          this.getCollectData();
        } else {
          this.$message.error("网络错误");
        }
      });
    },
    // 关闭收藏窗口
    closeCollect() {
      this.collectCategory = [];
      this.dialogVisible = false;
      this.isCreateCollect = false;
      this.categoryForm.categoryName = "";
    },
    // 获取收藏数量
    getCollectCount() {
      getCollectCount(this.postId).then((res) => {
        if (res.data.code === 1) {
          this.collectCount = res.data.data;
        } else {
          this.$message.error("网络错误");
        }
      });
    },
  },
  mounted() {
    // 判断是否点赞
    this.judgeLikes();
    // 获取点赞数量
    this.getLikeCount();
    // 判断是否收藏
    this.judgeCollect();
    // 获取收藏数量
    this.getCollectCount();
  },
  computed: {
    // 是否是沉浸模式
    ...mapState({
      isImmerse: (state) => state.Immerse.isImmerse,
      commentCount: (state) => state.Comment.commentCount,
    }),
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/Style/wlPrimaryBtn.css");
.operaBtn {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  div {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /deep/ .el-badge__content.is-fixed {
      top: 4px !important;
      right: 12px !important;
      background-color: #c2c8d1 !important;
    }
    // 悬浮效果
    &:hover {
      svg {
        color: #515767;
      }
    }
    // 点赞效果
    &.is-like {
      svg {
        color: #1e80ff;
      }
      /deep/ .el-badge__content.is-fixed {
        background-color: #1e80ff !important;
      }
    }
    // 收藏效果
    &.is-collect {
      svg {
        color: #1e80ff;
      }
      /deep/ .el-badge__content.is-fixed {
        background-color: #1e80ff !important;
      }
    }
    &.is-immerse {
      display: none;
    }
    svg {
      width: 20px;
      height: 20px;
      color: #8a919f;
    }
  }
}
</style>

<style scoped>
::v-deep .el-dialog__header {
  display: none !important;
}

::v-deep .el-dialog__body {
  padding-top: 10px;
  height: 424px;
}

::v-deep .el-dialog__body > .dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}

::v-deep .el-dialog__body > .dialog-top > span {
  font-size: 18px !important;
  font-weight: 600 !important;
}

::v-deep .el-dialog__body > .dialog-top > svg {
  color: #8a919f;
  cursor: pointer;
}

::v-deep .el-dialog__body > .active-collect > .dialog-bottom > .collect-list {
  display: flex;
  flex-direction: column;
  min-height: 335px;
  max-height: 335px;
  overflow-y: auto;
}

::v-deep
  .el-dialog__body
  > .active-collect
  > .dialog-bottom
  > .collect-list
  > .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f2f3f5;
}

::v-deep
  .el-dialog__body
  > .active-collect
  > .dialog-bottom
  > .collect-list
  > .item:hover {
  background-color: #f5f6f7;
}

::v-deep
  .el-dialog__body
  > .active-collect
  > .dialog-bottom
  > .collect-list
  > .item
  > .item-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

::-webkit-scrollbar {
  width: 3px;
}

::-webkit-scrollbar-track {
  background: #ffffff; /* 确保这里的颜色是你想要的 */
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #d8d8d8;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>